<%@ page language="java" contentType="text/html; charset=UTF-8"
  pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html lang="zh-CN">

<head>
<title>口算训练</title>
<%@ include file="/WEB-INF/include/meta.jsp"%>
<%@ include file="/WEB-INF/include/css.jsp"%>
</head>
<!-- end header -->

<body>
  <div class="page-group">
    <div class="page page-current bg-light-gray">
      <div class="content">
        <div class="content" style="background-color: #EFEFF4;">
          <div class="list-block" style="margin: 0px;">
            <div style="height: 7rem;margin: 0 auto;text-align: center;padding-top: 1rem;margin-bottom: 1rem;background-color: #a9b1bb;color: #fff;">
              <img style="width: 3rem; height: 3rem;" alt="" src="${ctx.resource}/images/edooschool.png">
              <p class="text-center" style="margin: 0px; font-size: .8rem; color: #fff;">陆老师小课堂</p>
              <p class="text-center" style="font-size: .6rem; margin: .2rem 0; color: #fff;">已有&nbsp;<span style="font-size: .6rem; font-weight: bold;">${userCount}</span>&nbsp;个孩子参加训练</p>
            </div>
            
            <div style="margin: 0 auto; border: .05rem solid #F5F5F8; background-color: #FFFFFF; position: relative; z-index: 99;" class="clearfix">
              <div class="pull-left index-grid" style="width: 33.33%; height: 5.4rem; border-bottom: 1px solid #EFEFEF; border-right: 1px solid #EFEFEF;">
                <a href="${ctx.host}/oral-groups/1">
                  <i class="fa fa-calculator" aria-hidden="true" style="color: #1AB161; font-weight: bold;"></i><br><small>20以内加减法</small>
                </a>
              </div>
              <div class="pull-left index-grid" style="width: 33.33%; height: 5.4rem; border-bottom: 1px solid #EFEFEF; border-right: 1px solid #EFEFEF; text-align: center;">
                <a href="${ctx.host}/oral-answer-records">
                  <i class="fa fa-history fa-2x" aria-hidden="true" style="color: #489ECF;"></i><br><small>我的训练</small>
                </a>
              </div>
              <div class="pull-left index-grid" style="width: 33.33%; height: 5.4rem; border-bottom: 1px solid #EFEFEF;">
                <a href="${ctx.host}/oral-waiting">
                  <i class="fa fa-calculator" aria-hidden="true" style="color: #1AB161; font-weight: bold;"></i><br><small>乘法口诀训练</small>
                </a>
              </div>
              
              <div class="pull-left index-grid" style="width: 33.33%; height: 5.4rem; border-bottom: 1px solid #EFEFEF; border-right: 1px solid #EFEFEF;">
                <a href="${ctx.host}/oral-waiting">
                  <i class="fa fa-plus-square" aria-hidden="true" style="color: #4C9FCD; font-weight: bold;"></i><br><small>100以内加减法</small>
                </a>
              </div>
              
              <div class="pull-left index-grid" style="width: 33.33%; height: 5.4rem; border-bottom: 1px solid #EFEFEF; border-right: 1px solid #EFEFEF;">
                <img alt="" src="${ctx.resource}/images/qrcode.jpg" style="width: 100%; height: 100%;">
              </div>
              <div class="pull-left index-grid" style="width: 33.33%; height: 5.4rem; border-bottom: 1px solid #EFEFEF;">
                <a href="${ctx.host}/oral-waiting">
                  <i class="fa fa-window-close" aria-hidden="true" style="color: #f60; font-weight: bold;"></i><br><small>20以内乘法</small>
                </a>
              </div>
              
              <div class="pull-left index-grid" style="width: 33.33%; height: 5.4rem; border-right: 1px solid #EFEFEF;">
                <a href="${ctx.host}/oral-waiting">
                  <i class="fa fa-pencil-square-o" aria-hidden="true" style="color: #f60; font-weight: bold;"></i><br><small>10以内加减法</small>
                </a>
              </div>
              <div class="pull-left index-grid" style="width: 33.33%; height: 5.4rem; text-align: center; border-right: 1px solid #EFEFEF;">
                <a href="javascript:void(0);">
                  <i class="fa fa-arrow-circle-up" aria-hidden="true" style="color: #FEC900; vertical-align: bottom;"></i>
                  <br><small>长按关注</small>
                </a>
              </div>
              <div class="pull-left index-grid" style="width: 33.33%; height: 5.4rem;">
                <a href="${ctx.host}/oral-waiting">
                  <i class="fa fa-graduation-cap" aria-hidden="true" style="color: #489ECF; font-weight: bold;"></i><br><small>综合训练</small>
                </a>
              </div>
            </div>
            
          </div>
          <p style="text-align: center; font-size: .6rem; color: #999; position: absolute; width: 100%; bottom: 0px; z-index: 10;">陆老师小课堂（微信号：llsxkt）出品</p>
        </div>
      </div>
    </div>
  </div>
  
  
  <%@ include file="/WEB-INF/include/script.jsp"%>
  <d:resource type="script" root="${ctx.resource}/build" src="js/page/oral/index.js" />
  <script type="text/javascript">
      require(['page/oral/index'], function(page) {
        page.init({
          jsConfig: JSON.parse('${jsConfig}')
        });
      })
  </script>
  
</body>
</html>